<!--
 * @Description: videoJs组件
 * @Author: LiuYan
 * @Date: 2022-01-07 15:08:18
 * @LastEditTime: 2022-03-25 10:00:22
 * @LastEditors: LiuYan
 * @Reference: 
-->
<template>
  <div class="video" :style="{ width, height }">
    <video class="video-js vjs-fill" :id="videoId" poster autoplay="true" muted="true">
      <source :src="src" :type="type" />
    </video>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: '',
    },
    // 播放地址
    src: {
      type: String,
      required: true,
      default: '',
    },
    poster: {
      type: String,
      default: '',
    },
    // 播放类型
    type: {
      type: String,
      default: 'application/x-mpegURL',
    },
    // 自带控件是否显示
    controls: {
      type: Boolean,
      default: false,
    },
    // 宽
    width: {
      type: String,
      default: '25vw',
    },
    // 高
    height: {
      type: String,
      default: '20vh',
    },
  },
  data() {
    return {
      video: null,
      options: {
        controls: false, // 打开播放控件
        autoplay: true, //自动播放属性
        loop: true, // 轮询播放
        muted: true, // 静音
        preload: 'metadata', //建议浏览器是否在加载<video>元素时开始下载视频数据。(预加载)
      },
    }
  },
  created() {
    if (this.id) {
      this.videoId = this.id
    } else {
      this.videoId = `videoJs2${Math.ceil(Math.random() * 100000)}_${Math.ceil(
        Math.random() * 100000
      )}`
    }
  },
  mounted() {
    document.body.appendChild(this.$el)
    this.initVideo()
  },
  methods: {
    initVideo() {
      this.$nextTick(() => {
        this.options.controls = this.controls
        this.video = this.$video(this.videoId, this.options, function () {}.bind(this))
      })
    },
  },
  beforeDestroy() {
    this.video.dispose()
  },
}
</script>

<style lang="less" scoped>
.video {
  position: fixed;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 895;
  /deep/ video {
    object-fit: fill;
  }
}
</style>
